<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类别管理</title>

    <link rel="stylesheet" href="../../style/category/index.css">
    <link rel="stylesheet" href="../../libs/bootstrap-5.3.0-alpha1-dist/css/bootstrap.css">
    <script src="../../js/vue-2.6.12.js"></script>
    <script src="../../js/axios-0.21.0.js"></script>
    <script src="../../js/vue-router-3.4.9.js"></script>
    <script src="../../js/qs-6.9.4.js"></script>
</head>

<body>
    <div class="containers" id="app">
        <div class="containers-header">
            <div class="row g-3 align-items-center">
                <div class="col-auto">
                    <label for="inputPassword6" class="col-form-label">名称</label>
                </div>
                <div class="col-auto">
                    <input type="password" id="inputPassword6" class="form-control"
                        aria-describedby="passwordHelpInline" placeholder="请输入名称">
                </div>
                <div class="col-auto">
                    <button class="btn btn-light">搜索</button>
                </div>
            </div>
            <div class="row g-3 align-items-center">
                <div class="col-auto">
                    <label for="inputPassword6" class="col-form-label">类别名称</label>
                </div>
                <div class="col-auto">
                    <input type="password" id="inputPassword6" class="form-control"
                        aria-describedby="passwordHelpInline" placeholder="请输入类别名称">
                </div>
                <div class="col-auto">
                    <label for="inputPassword6" class="col-form-label">商品数量</label>
                </div>
                <div class="col-auto">
                    <input type="password" id="inputPassword6" class="form-control"
                        aria-describedby="passwordHelpInline" placeholder="请输入商品数量">
                </div>
                <div class="col-auto">
                    <label for="inputPassword6" class="col-form-label">是否启用</label>
                </div>
                <div class="col-auto">
                    <select class="form-select" aria-label="Default select example">

                        <option value="启用">启用</option>
                        <option value="禁用">禁用</option>

                    </select>
                </div>
                <div class="col-auto">
                    <button class="btn btn-primary">添加类别</button>
                    <button class="btn btn-danger">删除类别</button>
                </div>
            </div>
            <br>

        </div>
        <!-- 内容展示区域 -->
        <div class="containers-connet">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th><input type="checkbox" name="" id=""></th>
                        <th>序号</th>
                        <th>类别名称</th>
                        <th>商品数量</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="checkbox" name="" id=""></td>
                        <td>1</td>
                        <td>衣服鞋子</td>
                        <td>12</td>
                        <td>
                            <button type="button" class="btn btn-info">启用</button>
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger">下架</button>
                            <button type="button" class="btn btn-primary " data-bs-toggle="modal"
                                data-bs-target="#exampleModal">修改</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- 修改类别模态框model -->

    </div>
    <!-- 修改类别模态框 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">修改密码</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="add-ename">类别名称:</label>
                            <input type="password" class="form-control" placeholder="请输入类别名称">
                        </div>
                        <div class="form-group">
                            <label for="add-ename">商品数量:</label>
                            <input type="password" class="form-control" placeholder="请输入商品数量">
                        </div>
                        <div class="form-group">
                            <label for="add-ename">是否启用:</label>
                            <select class="form-control" id="add-deptId">
                                <option value="启用">启用</option>
                                <option value="禁用">禁用</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="btn()">提交</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../../libs/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.js"></script>
<script>
    function btn() {
        /*   let addename = document.getElementById("add-ename")
          console.log(addename.value); */
        let _exampleModal = document.getElementById("exampleModal")
        let _model = document.getElementsByClassName("modal-backdrop show")
        _exampleModal.style.display = "none";
        _model[0].style.opacity = "0"
        setTimeout(() => {
            window.location.reload()
        }, 2000);
    }
    const app = new Vue({
        el: "#app",
        data: {
            category: {}
        },
        methods: {

        },

    })
</script>

</html>